
const canvas = document.getElementById('root')
const gl = canvas.getContext('webgl')

const program = gl.createProgram()

let VSHADER_SOURCE, FSHADER_SOURCE

/*
* 1、attribute 只能在vertex shader中使用变量，一般用于传递定点数据
* 2、uniform 常量，不能被shader修改。uniform变量在vertex和fragment两者之间声明方式完全一样，
* 则它可以在vertex和fragment共享使用。（相当于一个被vertex和fragment shader共享的全局变量）
* 3、varying varying变量是vertex和fragment shader之间做数据传递用的
* */

// vec4 四维向量
VSHADER_SOURCE = `
  attribute vec4 a_Position;
  void main () {
    gl_Position = a_Position;
  }
`
FSHADER_SOURCE = `
  void main () {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`

// 顶点着色器、片段着色器
let vertexShader, fragmentShader

function createShader(gl, sourceCode, type) {
  const shader = gl.createShader(type)
  gl.shaderSource(shader, sourceCode)
  gl.compileShader(shader)
  return shader
}

vertexShader = createShader(gl, VSHADER_SOURCE, gl.VERTEX_SHADER)
fragmentShader = createShader(gl, FSHADER_SOURCE, gl.FRAGMENT_SHADER)

//  将着色器对象附加到program对象
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)

gl.linkProgram(program)
gl.useProgram(program)

function initVertexBuffers(gl) {
  let vertices = new Float32Array([
    0, 0.5, -0.5, -0.5, 0.5, -0.5
  ])
  let n = 3
  let vertexBuffer = gl.createBuffer()
  // 将给定的WebGLBuffer绑定到目标。
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
  // 创建并初始化了Buffer对象的数据存储区。
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
  const aPosition = gl.getAttribLocation(program, 'a_Position')
  // 告诉显卡从当前绑定的缓冲区（bindBuffer()指定的缓冲区）中读取顶点数据
  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0)
  // turns on the generic vertex attribute array at the specified index into the list of attribute arrays
  // 将指定索引处的通用顶点属性数组打开到属性数组列表中
  gl.enableVertexAttribArray(aPosition)
  return n
}

const n = initVertexBuffers(gl)

gl.clearColor(0, 0, 0, 1)
function draw() {
  gl.clear(gl.COLOR_BUFFER_BIT)
  // 用于从向量数组中绘制图元
  gl.drawArrays(gl.TRIANGLES, 0, n)
}

draw()
